<!DOCTYPE html>
<html
  lang="en"
  data-bs-theme="light"
  data-menu-color="brand"
  data-topbar-color="light"
>
  <head>
    <meta charset="utf-8" />
    <title>Scrollspy | Dashtrap - Responsive Bootstrap 5 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      content="A fully featured admin theme which can be used to build CRM, CMS, etc."
      name="description"
    />
    <meta content="Myra Studio" name="author" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="../src/assets/images/favicon.ico" />

    <!-- App css -->
    <link
      href="../src/assets/css/style.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../src/assets/css/icons.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="../src/assets/js/config.js"></script>
  </head>

  <body>
    <!-- Begin page -->
    <div class="layout-wrapper">
      <!-- ========== Left Sidebar ========== -->
      <div class="main-menu">
        <!-- Brand Logo -->
        <div class="logo-box">
          <!-- Brand Logo Light -->
          <a href="index.html" class="logo-light">
            <img
              src="../src/assets/images/logo-light.png"
              alt="logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>

          <!-- Brand Logo Dark -->
          <a href="index.html" class="logo-dark">
            <img
              src="../src/assets/images/logo-dark.png"
              alt="dark logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>
        </div>

        <!--- Menu -->
        <div data-simplebar>
          <ul class="app-menu">
            <li class="menu-title">Menu</li>

            <li class="menu-item">
              <a href="index.html" class="menu-link waves-effect waves-light">
                <span class="menu-icon"><i class="bx bx-home-smile"></i></span>
                <span class="menu-text"> Dashboards </span>
                <span class="badge bg-primary rounded ms-auto">01</span>
              </a>
            </li>

            <li class="menu-title">Custom</li>

            <li class="menu-item">
              <a
                href="apps-calendar.html"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-calendar"></i></span>
                <span class="menu-text"> Calendar </span>
              </a>
            </li>

            <li class="menu-item">
              <a
                href="#menuExpages"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-file"></i></span>
                <span class="menu-text"> Extra Pages </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuExpages">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="pages-starter.html" class="menu-link">
                      <span class="menu-text">Starter</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-invoice.html" class="menu-link">
                      <span class="menu-text">Invoice</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-login.html" class="menu-link">
                      <span class="menu-text">Log In</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-register.html" class="menu-link">
                      <span class="menu-text">Register</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-recoverpw.html" class="menu-link">
                      <span class="menu-text">Recover Password</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-lock-screen.html" class="menu-link">
                      <span class="menu-text">Lock Screen</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-404.html" class="menu-link">
                      <span class="menu-text">Error 404</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-500.html" class="menu-link">
                      <span class="menu-text">Error 500</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuLayouts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-layout"></i></span>
                <span class="menu-text"> Layouts </span>
                <span class="badge bg-blue ms-auto">New</span>
              </a>
              <div class="collapse" id="menuLayouts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="layout-horizontal.html" class="menu-link">
                      <span class="menu-text">Horizontal</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-light.html" class="menu-link">
                      <span class="menu-text">Sidenav Light</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-dark.html" class="menu-link">
                      <span class="menu-text">Sidenav Dark</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-topbar-dark.html" class="menu-link">
                      <span class="menu-text">Topbar Dark</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-title">Components</li>

            <li class="menu-item">
              <a
                href="#menuComponentsui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-cookie"></i></span>
                <span class="menu-text"> UI Elements </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuComponentsui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="ui-alerts.html" class="menu-link">
                      <span class="menu-text">Alerts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-buttons.html" class="menu-link">
                      <span class="menu-text">Buttons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-cards.html" class="menu-link">
                      <span class="menu-text">Cards</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-carousel.html" class="menu-link">
                      <span class="menu-text">Carousel</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-dropdowns.html" class="menu-link">
                      <span class="menu-text">Dropdowns</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-video.html" class="menu-link">
                      <span class="menu-text">Embed Video</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-general.html" class="menu-link">
                      <span class="menu-text">General UI</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-grid.html" class="menu-link">
                      <span class="menu-text">Grid</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-images.html" class="menu-link">
                      <span class="menu-text">Images</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-list-group.html" class="menu-link">
                      <span class="menu-text">List Group</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-modals.html" class="menu-link">
                      <span class="menu-text">Modals</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-offcanvas.html" class="menu-link">
                      <span class="menu-text">Offcanvas</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-placeholders.html" class="menu-link">
                      <span class="menu-text">Placeholders</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-progress.html" class="menu-link">
                      <span class="menu-text">Progress</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-spinners.html" class="menu-link">
                      <span class="menu-text">Spinners</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tabs-accordions.html" class="menu-link">
                      <span class="menu-text">Tabs & Accordions</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tooltips-popovers.html" class="menu-link">
                      <span class="menu-text">Tooltips & Popovers</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-typography.html" class="menu-link">
                      <span class="menu-text">Typography</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuExtendedui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-briefcase-alt-2"></i
                ></span>
                <span class="menu-text"> Components </span>
                <span class="badge bg-info ms-auto">Hot</span>
              </a>
              <div class="collapse" id="menuExtendedui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="components-range-slider.html" class="menu-link">
                      <span class="menu-text">Range Slider</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-sweet-alert.html" class="menu-link">
                      <span class="menu-text">Sweet Alert</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-loading-buttons.html" class="menu-link">
                      <span class="menu-text">Loading Buttons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuIcons"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-aperture"></i></span>
                <span class="menu-text"> Icons </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuIcons">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="icons-feather.html" class="menu-link">
                      <span class="menu-text">Feather Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-mdi.html" class="menu-link">
                      <span class="menu-text">Material Design Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-dripicons.html" class="menu-link">
                      <span class="menu-text">Dripicons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuForms"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bxs-eraser"></i></span>
                <span class="menu-text"> Forms </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuForms">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="forms-elements.html" class="menu-link">
                      <span class="menu-text">General Elements</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-advanced.html" class="menu-link">
                      <span class="menu-text">Advanced</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-validation.html" class="menu-link">
                      <span class="menu-text">Validation</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-quilljs.html" class="menu-link">
                      <span class="menu-text">Editor</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-file-uploads.html" class="menu-link">
                      <span class="menu-text">File Uploads</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuTables"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-table"></i></span>
                <span class="menu-text"> Tables </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuTables">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="tables-basic.html" class="menu-link">
                      <span class="menu-text">Basic Tables</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="tables-datatables.html" class="menu-link">
                      <span class="menu-text">Data Tables</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuCharts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-doughnut-chart"></i
                ></span>
                <span class="menu-text"> Charts </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuCharts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="charts-apex.html" class="menu-link">
                      <span class="menu-text">Apex Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-morris.html" class="menu-link">
                      <span class="menu-text">Morris Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-chartjs.html" class="menu-link">
                      <span class="menu-text">Chartjs Charts</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMaps"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-map-alt"></i></span>
                <span class="menu-text"> Maps </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMaps">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="maps-google.html" class="menu-link">
                      <span class="menu-text">Google Maps</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="maps-vector.html" class="menu-link">
                      <span class="menu-text">Vector Maps</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMultilevel"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-share-alt"></i></span>
                <span class="menu-text"> Multi Level </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMultilevel">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a
                      href="#menuMultilevel2"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text"> Second Level </span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel2">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 2</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <li class="menu-item">
                    <a
                      href="#menuMultilevel3"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text">Third Level</span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel3">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a
                            href="#menuMultilevel4"
                            data-bs-toggle="collapse"
                            class="menu-link waves-effect waves-light"
                          >
                            <span class="menu-text">Item 2</span>
                            <span class="menu-arrow"></span>
                          </a>
                          <div class="collapse" id="menuMultilevel4">
                            <ul class="sub-menu">
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 1</span>
                                </a>
                              </li>
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 2</span>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Start Page Content here -->
      <div class="page-content">
        <!-- ========== Topbar Start ========== -->
        <div class="navbar-custom">
          <div class="topbar">
            <div class="topbar-menu d-flex align-items-center gap-lg-2 gap-1">
              <!-- Brand Logo -->
              <div class="logo-box">
                <!-- Brand Logo Light -->
                <a href="index.html" class="logo-light">
                  <img
                    src="../src/assets/images/logo-light.png"
                    alt="logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>

                <!-- Brand Logo Dark -->
                <a href="index.html" class="logo-dark">
                  <img
                    src="../src/assets/images/logo-dark.png"
                    alt="dark logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>
              </div>

              <!-- Sidebar Menu Toggle Button -->
              <button class="button-toggle-menu">
                <i class="mdi mdi-menu"></i>
              </button>
            </div>

            <ul class="topbar-menu d-flex align-items-center gap-4">
              <li class="d-none d-md-inline-block">
                <a class="nav-link" href="" data-bs-toggle="fullscreen">
                  <i class="mdi mdi-fullscreen font-size-24"></i>
                </a>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-magnify font-size-24"></i>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-animated dropdown-menu-end dropdown-lg p-0"
                >
                  <form class="p-3">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Search ..."
                      aria-label="Recipient's username"
                    />
                  </form>
                </div>
              </li>

              <li class="dropdown d-none d-md-inline-block">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/flags/us.jpg"
                    alt="user-image"
                    class="me-0 me-sm-1"
                    height="18"
                  />
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated"
                >
                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/germany.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">German</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/italy.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Italian</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/spain.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Spanish</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/russia.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Russian</span>
                  </a>
                </div>
              </li>

              <li class="dropdown notification-list">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-bell font-size-24"></i>
                  <span class="badge bg-danger rounded-circle noti-icon-badge"
                    >9</span
                  >
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0"
                >
                  <div
                    class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border"
                  >
                    <div class="row align-items-center">
                      <div class="col">
                        <h6 class="m-0 font-size-16 fw-semibold">
                          Notification
                        </h6>
                      </div>
                      <div class="col-auto">
                        <a
                          href="javascript: void(0);"
                          class="text-dark text-decoration-underline"
                        >
                          <small>Clear All</small>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="px-1" style="max-height: 300px" data-simplebar>
                    <h5 class="text-muted font-size-13 fw-normal mt-2">
                      Today
                    </h5>
                    <!-- item-->

                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card unread-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                              <small class="fw-normal text-muted ms-1"
                                >1 min ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-info">
                              <i class="mdi mdi-account-plus"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Admin
                              <small class="fw-normal text-muted ms-1"
                                >1 hours ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >New user registered</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      Yesterday
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-2.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Cristina Pride
                              <small class="fw-normal text-muted ms-1"
                                >1 day ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Hi, How are you? What about our next
                              meeting</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      30 Dec 2021
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-4.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Karen Robinson
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Wow ! this admin looks good and awesome
                              design</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <div class="text-center">
                      <i
                        class="mdi mdi-dots-circle mdi-spin text-muted h3 mt-0"
                      ></i>
                    </div>
                  </div>

                  <!-- All-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item text-center text-primary notify-item border-top border-light py-2"
                  >
                    View All
                  </a>
                </div>
              </li>

              <li class="nav-link" id="theme-mode">
                <i class="bx bx-moon font-size-24"></i>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/users/avatar-4.jpg"
                    alt="user-image"
                    class="rounded-circle"
                  />
                  <span class="ms-1 d-none d-md-inline-block">
                    Jamie D. <i class="mdi mdi-chevron-down"></i>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end profile-dropdown">
                  <!-- item-->
                  <div class="dropdown-header noti-title">
                    <h6 class="text-overflow m-0">Welcome !</h6>
                  </div>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-user"></i>
                    <span>My Account</span>
                  </a>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-settings"></i>
                    <span>Settings</span>
                  </a>

                  <!-- item-->
                  <a
                    href="pages-lock-screen.html"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-lock"></i>
                    <span>Lock Screen</span>
                  </a>

                  <div class="dropdown-divider"></div>

                  <!-- item-->
                  <a href="pages-login.html" class="dropdown-item notify-item">
                    <i class="fe-log-out"></i>
                    <span>Logout</span>
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- ========== Topbar End ========== -->

        <div class="px-3">
          <!-- Start Content-->
          <div class="container-fluid">
            <!-- start page title -->
            <div class="py-3 py-lg-4">
              <div class="row">
                <div class="col-lg-6">
                  <h4 class="page-title mb-0">Scrollspy</h4>
                </div>
                <div class="col-lg-6">
                  <div class="d-none d-lg-block">
                    <ol class="breadcrumb m-0 float-end">
                      <li class="breadcrumb-item">
                        <a href="javascript: void(0);">Extended UI</a>
                      </li>
                      <li class="breadcrumb-item active">Scrollspy</li>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
            <!-- end page title -->

            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Example in navbar</h4>
                    <p class="sub-header">
                      Scroll the area below the navbar and watch the active
                      class change. The dropdown items will be highlighted as
                      well.
                    </p>

                    <nav
                      id="navbar-example2"
                      class="navbar navbar-light bg-light"
                    >
                      <a class="navbar-brand" href="#">Navbar</a>
                      <ul class="nav nav-pills">
                        <li class="nav-item">
                          <a class="nav-link active" href="#fat">@fat</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#mdo">@mdo</a>
                        </li>
                        <li class="nav-item dropdown">
                          <a
                            class="nav-link dropdown-toggle arrow-none"
                            data-bs-toggle="dropdown"
                            href="#"
                            role="button"
                            aria-haspopup="true"
                            aria-expanded="false"
                            >Dropdown <i class="mdi mdi-chevron-down"></i
                          ></a>
                          <div class="dropdown-menu dropdown-menu-end">
                            <a class="dropdown-item" href="#one">one</a>
                            <a class="dropdown-item" href="#two">two</a>
                            <div
                              role="separator"
                              class="dropdown-divider"
                            ></div>
                            <a class="dropdown-item" href="#three">three</a>
                          </div>
                        </li>
                      </ul>
                    </nav>
                    <div
                      data-bs-spy="scroll"
                      data-bs-target="#navbar-example2"
                      data-bs-offset="0"
                      class="scrollspy-example"
                    >
                      <div>
                        <h4 id="fat" class="pt-2 mt-0">@fat</h4>
                        <p>
                          Ad leggings keytar, brunch id art party dolor labore.
                          Pitchfork yr enim lo-fi before they sold out qui.
                          Tumblr farm-to-table bicycle rights whatever. Anim
                          keffiyeh carles cardigan. Velit seitan mcsweeney's
                          photo booth 3 wolf moon irure. Cosby sweater lomo jean
                          shorts, williamsburg hoodie minim qui you probably
                          haven't heard of them et cardigan trust fund culpa
                          biodiesel wes anderson aesthetic. Nihil tattooed
                          accusamus, cred irony biodiesel keffiyeh artisan
                          ullamco consequat.
                        </p>
                        <h4 id="mdo">@mdo</h4>
                        <p>
                          Veniam marfa mustache skateboard, adipisicing fugiat
                          velit pitchfork beard. Freegan beard aliqua cupidatat
                          mcsweeney's vero. Cupidatat four loko nisi, ea
                          helvetica nulla carles. Tattooed cosby sweater food
                          truck, mcsweeney's quis non freegan vinyl. Lo-fi wes
                          anderson +1 sartorial. Carles non aesthetic
                          exercitation quis gentrify. Brooklyn adipisicing craft
                          beer vice keytar deserunt.
                        </p>
                        <h4 id="one">one</h4>
                        <p>
                          Occaecat commodo aliqua delectus. Fap craft beer
                          deserunt skateboard ea. Lomo bicycle rights
                          adipisicing banh mi, velit ea sunt next level locavore
                          single-origin coffee in magna veniam. High life id
                          vinyl, echo park consequat quis aliquip banh mi
                          pitchfork. Vero VHS est adipisicing. Consectetur nisi
                          DIY minim messenger bag. Cred ex in, sustainable
                          delectus consectetur fanny pack iphone.
                        </p>
                        <h4 id="two">two</h4>
                        <p>
                          In incididunt echo park, officia deserunt mcsweeney's
                          proident master cleanse thundercats sapiente veniam.
                          Excepteur VHS elit, proident shoreditch +1 biodiesel
                          laborum craft beer. Single-origin coffee wayfarers
                          irure four loko, cupidatat terry richardson master
                          cleanse. Assumenda you probably haven't heard of them
                          art party fanny pack, tattooed nulla cardigan tempor
                          ad. Proident wolf nesciunt sartorial keffiyeh eu banh
                          mi sustainable. Elit wolf voluptate, lo-fi ea portland
                          before they sold out four loko. Locavore enim nostrud
                          mlkshk brooklyn nesciunt.
                        </p>
                        <h4 id="three">three</h4>
                        <p>
                          Ad leggings keytar, brunch id art party dolor labore.
                          Pitchfork yr enim lo-fi before they sold out qui.
                          Tumblr farm-to-table bicycle rights whatever. Anim
                          keffiyeh carles cardigan. Velit seitan mcsweeney's
                          photo booth 3 wolf moon irure. Cosby sweater lomo jean
                          shorts, williamsburg hoodie minim qui you probably
                          haven't heard of them et cardigan trust fund culpa
                          biodiesel wes anderson aesthetic. Nihil tattooed
                          accusamus, cred irony biodiesel keffiyeh artisan
                          ullamco consequat.
                        </p>
                        <p>
                          Keytar twee blog, culpa messenger bag marfa whatever
                          delectus food truck. Sapiente synth id assumenda.
                          Locavore sed helvetica cliche irony, thundercats you
                          probably haven't heard of them consequat hoodie
                          gluten-free lo-fi fap aliquip. Labore elit placeat
                          before they sold out, terry richardson proident brunch
                          nesciunt quis cosby sweater pariatur keffiyeh ut
                          helvetica artisan. Cardigan craft beer seitan
                          readymade velit. VHS chambray laboris tempor veniam.
                          Anim mollit minim commodo ullamco thundercats.
                        </p>
                      </div>
                    </div>
                  </div>
                  <!-- end card-body -->
                </div>
                <!-- end card-->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Example with nested nav</h4>
                    <p class="sub-header">
                      Scrollspy also works with nested <code>.nav</code>s. If a
                      nested <code>.nav</code> is <code>.active</code>, its
                      parents will also be <code>.active</code>. Scroll the area
                      next to the navbar and watch the active class change.
                    </p>

                    <div class="row">
                      <div class="col-sm-4">
                        <nav
                          id="navbar-example3"
                          class="navbar navbar-light flex-column"
                        >
                          <a class="navbar-brand" href="#">Navbar</a>
                          <nav class="nav nav-pills flex-column">
                            <a class="nav-link active" href="#item-1">Item 1</a>
                            <nav class="nav nav-pills flex-column">
                              <a
                                class="nav-link ms-3 my-1 active"
                                href="#item-1-1"
                                >Item 1-1</a
                              >
                              <a class="nav-link ms-3 my-1" href="#item-1-2"
                                >Item 1-2</a
                              >
                            </nav>
                            <a class="nav-link" href="#item-2">Item 2</a>
                            <a class="nav-link" href="#item-3">Item 3</a>
                            <nav class="nav nav-pills flex-column">
                              <a class="nav-link ms-3 my-1" href="#item-3-1"
                                >Item 3-1</a
                              >
                              <a class="nav-link ms-3 my-1" href="#item-3-2"
                                >Item 3-2</a
                              >
                            </nav>
                          </nav>
                        </nav>
                      </div>
                      <div class="col-sm-8">
                        <div
                          data-bs-spy="scroll"
                          data-bs-target="#navbar-example3"
                          data-bs-offset="0"
                          class="scrollspy-example"
                          style="height: 350px"
                        >
                          <div>
                            <h4 id="item-1" class="pt-2 mt-0">Item 1</h4>
                            <p>
                              Ex consequat commodo adipisicing exercitation aute
                              excepteur occaecat ullamco duis aliqua id magna
                              ullamco eu. Do aute ipsum ipsum ullamco cillum
                              consectetur ut et aute consectetur labore. Fugiat
                              laborum incididunt tempor eu consequat enim dolore
                              proident. Qui laborum do non excepteur nulla magna
                              eiusmod consectetur in. Aliqua et aliqua officia
                              quis et incididunt voluptate non anim
                              reprehenderit adipisicing dolore ut consequat
                              deserunt mollit dolore. Aliquip nulla enim veniam
                              non fugiat id cupidatat nulla elit cupidatat
                              commodo velit ut eiusmod cupidatat elit dolore.
                            </p>
                            <h5 id="item-1-1">Item 1-1</h5>
                            <p>
                              Amet tempor mollit aliquip pariatur excepteur
                              commodo do ea cillum commodo Lorem et occaecat
                              elit qui et. Aliquip labore ex ex esse voluptate
                              occaecat Lorem ullamco deserunt. Aliqua cillum
                              excepteur irure consequat id quis ea. Sit proident
                              ullamco aute magna pariatur nostrud labore.
                              Reprehenderit aliqua commodo eiusmod aliquip est
                              do duis amet proident magna consectetur consequat
                              eu commodo fugiat non quis. Enim aliquip
                              exercitation ullamco adipisicing voluptate
                              excepteur minim exercitation minim minim commodo
                              adipisicing exercitation officia nisi adipisicing.
                              Anim id duis qui consequat labore adipisicing sint
                              dolor elit cillum anim et fugiat.
                            </p>
                            <h5 id="item-1-2">Item 1-2</h5>
                            <p>
                              Cillum nisi deserunt magna eiusmod qui eiusmod
                              velit voluptate pariatur laborum sunt enim. Irure
                              laboris mollit consequat incididunt sint et culpa
                              culpa incididunt adipisicing magna magna occaecat.
                              Nulla ipsum cillum eiusmod sint elit excepteur ea
                              labore enim consectetur in labore anim. Proident
                              ullamco ipsum esse elit ut Lorem eiusmod dolor et
                              eiusmod. Anim occaecat nulla in non consequat
                              eiusmod velit incididunt.
                            </p>
                            <h4 id="item-2">Item 2</h4>
                            <p>
                              Quis magna Lorem anim amet ipsum do mollit sit
                              cillum voluptate ex nulla tempor. Laborum
                              consequat non elit enim exercitation cillum aliqua
                              consequat id aliqua. Esse ex consectetur mollit
                              voluptate est in duis laboris ad sit ipsum anim
                              Lorem. Incididunt veniam velit elit elit veniam
                              Lorem aliqua quis ullamco deserunt sit enim elit
                              aliqua esse irure. Laborum nisi sit est tempor
                              laborum mollit labore officia laborum excepteur
                              commodo non commodo dolor excepteur commodo. Ipsum
                              fugiat ex est consectetur ipsum commodo tempor
                              sunt in proident.
                            </p>
                            <h4 id="item-3">Item 3</h4>
                            <p>
                              Quis anim sit do amet fugiat dolor velit sit ea ea
                              do reprehenderit culpa duis. Nostrud aliqua ipsum
                              fugiat minim proident occaecat excepteur aliquip
                              culpa aute tempor reprehenderit. Deserunt tempor
                              mollit elit ex pariatur dolore velit fugiat mollit
                              culpa irure ullamco est ex ullamco excepteur.
                            </p>
                            <h5 id="item-3-1">Item 3-1</h5>
                            <p>
                              Deserunt quis elit Lorem eiusmod amet enim enim
                              amet minim Lorem proident nostrud. Ea id dolore
                              anim exercitation aute fugiat labore voluptate
                              cillum do laboris labore. Ex velit exercitation
                              nisi enim labore reprehenderit labore nostrud ut
                              ut. Esse officia sunt duis aliquip ullamco tempor
                              eiusmod deserunt irure nostrud irure. Ullamco
                              proident veniam laboris ea consectetur magna sunt
                              ex exercitation aliquip minim enim culpa occaecat
                              exercitation. Est tempor excepteur aliquip laborum
                              consequat do deserunt laborum esse eiusmod irure
                              proident ipsum esse qui.
                            </p>
                            <h5 id="item-3-2">Item 3-2</h5>
                            <p>
                              Labore sit culpa commodo elit adipisicing sit
                              aliquip elit proident voluptate minim mollit
                              nostrud aute reprehenderit do. Mollit excepteur eu
                              Lorem ipsum anim commodo sint labore Lorem in
                              exercitation velit incididunt. Occaecat
                              consectetur nisi in occaecat proident minim enim
                              sunt reprehenderit exercitation cupidatat et do
                              officia. Aliquip consequat ad labore labore mollit
                              ut amet. Sit pariatur tempor proident in veniam
                              culpa aliqua excepteur elit magna fugiat eiusmod
                              amet officia.
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- end card-body -->
                </div>
                <!-- end card-->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Example with list-group</h4>
                    <p class="sub-header">
                      Scrollspy also works with nested <code>.nav</code>s. If a
                      nested <code>.nav</code> is <code>.active</code>, its
                      parents will also be <code>.active</code>. Scroll the area
                      next to the navbar and watch the active class change.
                    </p>

                    <div class="row">
                      <div class="col-sm-4">
                        <div id="list-example" class="list-group">
                          <a
                            class="list-group-item list-group-item-action active"
                            href="#list-item-1"
                            >Item 1</a
                          >
                          <a
                            class="list-group-item list-group-item-action"
                            href="#list-item-2"
                            >Item 2</a
                          >
                          <a
                            class="list-group-item list-group-item-action"
                            href="#list-item-3"
                            >Item 3</a
                          >
                          <a
                            class="list-group-item list-group-item-action"
                            href="#list-item-4"
                            >Item 4</a
                          >
                        </div>
                      </div>
                      <div class="col-sm-8">
                        <div
                          data-bs-spy="scroll"
                          data-bs-target="#list-example"
                          data-bs-offset="0"
                          class="scrollspy-example"
                        >
                          <h4 id="list-item-1">Item 1</h4>
                          <p>
                            Ex consequat commodo adipisicing exercitation aute
                            excepteur occaecat ullamco duis aliqua id magna
                            ullamco eu. Do aute ipsum ipsum ullamco cillum
                            consectetur ut et aute consectetur labore. Fugiat
                            laborum incididunt tempor eu consequat enim dolore
                            proident. Qui laborum do non excepteur nulla magna
                            eiusmod consectetur in. Aliqua et aliqua officia
                            quis et incididunt voluptate non anim reprehenderit
                            adipisicing dolore ut consequat deserunt mollit
                            dolore. Aliquip nulla enim veniam non fugiat id
                            cupidatat nulla elit cupidatat commodo velit ut
                            eiusmod cupidatat elit dolore.
                          </p>
                          <h4 id="list-item-2">Item 2</h4>
                          <p>
                            Quis magna Lorem anim amet ipsum do mollit sit
                            cillum voluptate ex nulla tempor. Laborum consequat
                            non elit enim exercitation cillum aliqua consequat
                            id aliqua. Esse ex consectetur mollit voluptate est
                            in duis laboris ad sit ipsum anim Lorem. Incididunt
                            veniam velit elit elit veniam Lorem aliqua quis
                            ullamco deserunt sit enim elit aliqua esse irure.
                            Laborum nisi sit est tempor laborum mollit labore
                            officia laborum excepteur commodo non commodo dolor
                            excepteur commodo. Ipsum fugiat ex est consectetur
                            ipsum commodo tempor sunt in proident.
                          </p>
                          <h4 id="list-item-3">Item 3</h4>
                          <p>
                            Quis anim sit do amet fugiat dolor velit sit ea ea
                            do reprehenderit culpa duis. Nostrud aliqua ipsum
                            fugiat minim proident occaecat excepteur aliquip
                            culpa aute tempor reprehenderit. Deserunt tempor
                            mollit elit ex pariatur dolore velit fugiat mollit
                            culpa irure ullamco est ex ullamco excepteur.
                          </p>
                          <h4 id="list-item-4">Item 4</h4>
                          <p>
                            Quis anim sit do amet fugiat dolor velit sit ea ea
                            do reprehenderit culpa duis. Nostrud aliqua ipsum
                            fugiat minim proident occaecat excepteur aliquip
                            culpa aute tempor reprehenderit. Deserunt tempor
                            mollit elit ex pariatur dolore velit fugiat mollit
                            culpa irure ullamco est ex ullamco excepteur.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- end card-body -->
                </div>
                <!-- end card-->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->
          </div>
          <!-- container -->
        </div>
        <!-- content -->

        <!-- Footer Start -->
        <footer class="footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6">
                <div>
                  <script>
                    document.write(new Date().getFullYear());
                  </script>
                  © Dashtrap
                </div>
              </div>
              <div class="col-md-6">
                <div
                  class="d-none d-md-flex gap-4 align-item-center justify-content-md-end"
                >
                  <p class="mb-0">
                    Design & Develop by
                    <a href="https://myrathemes.com/" target="_blank"
                      >MyraStudio</a
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </footer>
        <!-- end Footer -->
      </div>
      <!-- End Page content -->
    </div>
    <!-- END wrapper -->

    <!-- App js -->
    <script src="../src/assets/js/vendor.min.js"></script>
    <script src="../src/assets/js/app.js"></script>
  </body>
</html>
